<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
</head>
<style>
    .yizhu_detail {
        width: 94%;
        padding: 0.8rem 3%;
        height: 9.5rem;
        background-color: #fff;
        font-size: 0.6rem;
        outline: none;
    }

    .nums {
        font-size: 0.6rem;
        color: #565656;
        position: absolute;
        right: 0.8rem;
        top: 10rem;
    }

    .nums span {
        color: #2780e8;
    }

    .save_always_yizhu {
        background-color: #fff;
        height: 3rem;
        line-height: 3rem;
        width: 95%;
        padding-left: 5%;
        color: #565656;
        font-size: 0.7rem;
    }

    .save_always_yizhu img {
        width: 1rem;
        height: 1rem;
        margin-right: 0.3rem;
        margin-top: -0.1rem;
    }

    .select_tab {
        width: 100%;
        background-color: #fff;
        height: 2.7rem;
        line-height: 2.7rem;
    }

    .select_tab span {
        display: inline-block;
        color: #565656;
        font-size: 0.7rem;
        width: 49%;
        text-align: center;
    }

    .tab_active {
        color: #FD6150 !important;
    }

    .yizhu_shuru {
        width: 100%;
    }

    .yizhu_shuru .yizhu_title {
        padding: 0.8rem;
        color: #565656;
        font-size: 0.7rem;
    }

    .yizhu_shuru .yizhu_div {
        padding: 0 1rem;
    }

    .yizhu_shuru .yizhu_div .yizhu_div_item {
        padding: 0.3rem 0.5rem;
        background-color: #fff;
        color: #565656;
        font-size: 0.6rem;
        display: inline-block;
        margin-right: 0.7rem;
        border: 1px solid #E8E8E8;
        border-radius: 0.5rem;
        margin-bottom: 0.5rem;
    }


    .always_yizuh {
        padding: 0.5rem 0.8rem;
    }

    .always_yizuh .always_yizuh_item {
        font-size: 0.6rem;
        padding: 0.3rem 0.5rem;
        border-radius: 0.5rem;
        display: inline-block;
        border: 1px solid #e8e8e8;
        background-color: #fff;
        margin-top: 0.5rem;
        margin-right: 1rem;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div class="placeholder_div"></div>
        <p class="nums"><span>{{length}}</span>/ 300</p>
        <textarea class="yizhu_detail" v-model="forms.medicalAdvice" maxlength="300"
            placeholder="服药时间、忌口与禁忌、用药注意事项等（药房和患者均可见）"></textarea>
        <div class="yizhu_shuru">
            <p class="yizhu_title">服药时间</p>
            <div class="yizhu_div">
                <div class="yizhu_div_item" @click="putInput('饭前一小时服，')">饭前一小时服</div>
                <div class="yizhu_div_item" @click="putInput('饭后半小时服，')">饭后半小时服</div>
                <div class="yizhu_div_item" @click="putInput('晨起服，')">晨起服</div>
                <div class="yizhu_div_item" @click="putInput('空腹服，')">空腹服</div>
            </div>


            <p class="yizhu_title">忌口与禁忌</p>
            <div class="yizhu_div">
                <div class="yizhu_div_item" @click="putInput('无，')">无</div>
                <div class="yizhu_div_item" @click="putInput('忌辛辣，')">忌辛辣</div>
                <div class="yizhu_div_item" @click="putInput('忌油腻，')">忌油腻</div>
                <div class="yizhu_div_item" @click="putInput('忌生冷，')">忌生冷</div>
                <div class="yizhu_div_item" @click="putInput('忌刺激性食物，')">忌刺激性食物</div>
                <div class="yizhu_div_item" @click="putInput('禁光敏性食物，')">禁光敏性食物</div>
                <div class="yizhu_div_item" @click="putInput('忌难消化食物，')">忌难消化食物</div>
                <div class="yizhu_div_item" @click="putInput('备孕禁服，')">备孕禁服</div>
                <div class="yizhu_div_item" @click="putInput('怀孕禁服，')">怀孕禁服</div>
                <div class="yizhu_div_item" @click="putInput('经期停服，')">经期停服</div>
                <div class="yizhu_div_item" @click="putInput('感冒停服，')">感冒停服</div>
                <div class="yizhu_div_item" @click="putInput('忌与西药同服，')">忌与西药同服</div>
            </div>
        </div>
    </div>
</body>

</html>
<script src="../../script/set_root.js"></script>

<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        initVue(api.pageParam);
    }

    function initVue(params) {
        window.app = new Vue({
            el: '#app',
            data: {
                length: 0,
                forms: {
                    "medicalAdvice": params.content ? params.content : "",
                }
            },
            methods: {
                putInput: function (content) {
                    this.forms.medicalAdvice += content
                }
            },
            watch: {
                // 医嘱字数
                "forms.medicalAdvice": function (val) {
                    this.length = val.length
                    api.sendEvent({
                        name: 'medicalAdvice',
                        extra: {
                            content: this.forms.medicalAdvice
                        }
                    });
                } //endTotalAdviceNum

            }, //endwatch
        });
    } //endfunction
</script>